<template>
    <div>
        <el-container>
            <el-header class="header-bg" style="height: 60px;">
                <!--                <img class="yla-log" src="@/assets/imgs/basis.png" alt="左上角Log">-->
                <div class="yla-top-logo"></div>
                <el-dropdown class="cursor-pointer fr" style="height: 60px;line-height: 60px;">
                    <div class="dlblock c-fff">
                        {{nickName}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="outBtn">
                            退出登录
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="pwdData.modal=true;">
                            修改密码
                        </el-dropdown-item>
                        <!--<el-dropdown-item @click.native="setFull">
                            全屏
                        </el-dropdown-item>-->

                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>

            <el-container class="">
                <el-aside class="aside" style="width: 200px;">
                    <div class="aside-menu">
                        <el-menu class="menu-bg"
                                 unique-opened
                                 text-color="#fff"
                                 :router="true"
                                 background-color="#071C44"
                                 active-text-color="#409EFF"
                                 default-active="/data/user/account">
                            <template v-for="(item, key) in menuList">
                                <el-submenu :index="item.href" :key="key" v-if="item.items.length">
                                    <template slot="title">
                                        <!--第一层菜单-->
                                        <i class="iconfont font18" :class="item.title"></i>
                                        <span class="pl15">{{item.name}}</span>
                                    </template>
                                    <template v-for="(item2, key2) in item.items">
                                        <!-- <el-submenu :index="item2.href" :key="key2" v-if="item2.items.length>0">-->
                                        <!--<template slot="title">
                                            &lt;!&ndash;第二层菜单&ndash;&gt;
                                            <i class="iconfont font18" :class="item2.title"></i>
                                            <span class="pl15">{{item2.name}}</span>
                                        </template>
                                        &lt;!&ndash;<el-menu-item v-for="item3 in item2.items"  :key="item3.url" :index="item3.href">
                                            <template v-if="item3.value !=1">
                                                <i class="iconfont font18" :class="item3.title"></i>
                                                <span class="pl15">{{item3.name}}</span>
                                            </template>
                                        </el-menu-item>&ndash;&gt;
                                        &lt;!&ndash;<el-menu-item v-for="(item3,key3) in item2.items" :key="key3" :index="item3.href">
                                            &ensp;&ensp;{{item3.name}}
                                        </el-menu-item>&ndash;&gt;
                                    </el-submenu>-->
                                        <el-menu-item :index="item2.href" :key="key2">
                                            <i class="iconfont font18" :class="item2.title"></i>
                                            <span class="pl15">{{item2.name}}</span>
                                        </el-menu-item>
                                    </template>
                                </el-submenu>
                                <el-menu-item :index="item.href" v-else :key="key">
                                    &ensp;&ensp;&ensp;<i class="iconfont font18" :class="item.title"></i>
                                    <span class="pl15">{{item.name}}</span>
                                </el-menu-item>
                            </template>
                        </el-menu>
                    </div>
                </el-aside>

                <el-main style="padding-top: 74px;" class="pl200">
                    <el-header class="header-tags">
                        <tags-view/>
                    </el-header>
                    <transition name="el-fade-in-linear" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </el-main>
            </el-container>
        </el-container>

        <el-dialog title="修改密码" ref="formPwd" width="400px" @closed="backLogin()" :visible.sync="pwdData.modal">
            <el-form ref="form" :model="pwdData" :rules="rules" label-width="80px" label-position="left">
                <el-form-item prop="oldPwd" label="原密码">
                    <el-input
                            class="form-input"
                            type="password"
                            placeholder="请输入原密码"
                            v-model.trim="pwdData.oldPwd">
                    </el-input>
                </el-form-item>
                <el-form-item prop="newPwd" label="新密码">
                    <el-input
                            class="form-input"
                            placeholder="请输入新密码"
                            type="password"
                            v-model.trim="pwdData.newPwd">
                    </el-input>
                </el-form-item>
                <el-form-item prop="againPwd" class="text-center" label="确认密码">
                    <el-input
                            class="form-input"
                            placeholder="请再次输入新密码"
                            type="password"
                            v-model.trim="pwdData.againPwd">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="text-center">
                <el-button @click="pwdData.modal = false">取 消</el-button>
                <el-button type="primary" @click="updPwd(1)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {getUserDataByToken, setUserPassword, setUserPWD} from '@/api'
    import TagsView from '@/components/TagsView'
    import '../../assets/font/iconfont.css'
    // /*全局变量*/
    // const menuList = [
    //     {
    //
    //         name: '系统首页',
    //         url: '/home',
    //         icon: 'miconfuwu',
    //         items: null,
    //     },
    //     {
    //         name: '分组管理',
    //         icon: 'miconicon-project',
    //         url: '/group',
    //         items: null,
    //     },
    //     {
    //         path: '/demo',
    //         icon: 'miconicon-project',
    //         name: '案例',
    //         items: null,
    //     },
    //     {
    //         name: '线路管理',
    //         icon: 'miconicon-project',
    //         url: '/menu',
    //         items: null,
    //     },
    //     {
    //         name: '站点管理',
    //         icon: 'miconicon-project',
    //         url: '/station',
    //         items: [
    //             {
    //                 name: '站点编辑',
    //                 icon: 'miconicon-project',
    //                 url: '/station/edit',
    //                 items: null,
    //             },
    //             {
    //                 name: '站点定位',
    //                 icon: 'miconicon-project',
    //                 url: '/station/location',
    //                 items: null,
    //             },
    //         ]
    //     },
    //     {
    //         name: '车辆管理',
    //         icon: 'miconicon-project',
    //         url: '/vehicle',
    //         items: null,
    //     },
    //     {
    //         name: '设备管理',
    //         icon: 'miconicon-project',
    //         url: '/device',
    //         items: [
    //             {
    //                 name: '设备编辑',
    //                 icon: 'miconicon-project',
    //                 url: '/device/edit',
    //                 items: null,
    //             },
    //
    //         ]
    //     },
    //     {
    //         name: '区域管理',
    //         icon: 'miconicon-project',
    //         url: '/area',
    //         items: null,
    //     },
    //     {
    //         name: '人员管理',
    //         icon: 'miconicon-project',
    //         url: '/person',
    //         items: [
    //             {
    //                 name: '人员编辑',
    //                 icon: 'miconicon-project',
    //                 url: '/person/edit',
    //                 items: null,
    //             },
    //         ],
    //     },
    //     {
    //         name: '部门管理',
    //         icon: 'miconicon-project',
    //         url: '/department',
    //         items: null,
    //     },
    //     {
    //         name: '职务管理',
    //         icon: 'miconicon-project',
    //         url: '/work',
    //         items: null,
    //     },
    //     {
    //         name: '账号管理',
    //         icon: 'miconicon-project',
    //         url: '/account',
    //         items: null,
    //     },
    //     {
    //         name: '角色管理',
    //         icon: 'miconicon-project',
    //         url: '/role',
    //         items: [
    //             {
    //                 name: '角色编辑',
    //                 icon: 'miconicon-project',
    //                 url: '/role/edit',
    //                 items: null,
    //             },
    //         ],
    //     },
    //     {
    //         name: '系统日志',
    //         icon: 'miconicon-project',
    //         url: '/log',
    //         items: null,
    //     },
    //
    // ]

    export default {
        components: {TagsView,},
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else if (value.length < 6) {
                    callback(new Error('密码不少于6位'))
                } else {
                    callback()
                }
            }
            const validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else if (value.length < 6) {
                    callback(new Error('密码不少于6位'))
                } else {
                    callback()
                }
            }
            const validatePass3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.pwdData.newPwd) {
                    callback(new Error('两次输入密码不一致,请重新输入!'))
                } else {
                    callback()
                }
            }

            return {
                rules: {
                    oldPwd: [{validator: validatePass, trigger: 'blur'}],
                    newPwd: [{validator: validatePass2, trigger: 'blur'}],
                    againPwd: [{validator: validatePass3, trigger: 'blur'}]
                },
                // 修改密码数据
                pwdData: {
                    modal: false,
                    oldPwd: '',
                    newPwd: '',
                    againPwd: ''
                },
                menuList: []
            }
        },
        computed: {
            nickName() {
                return this.$store.state.user.userName
            },
        },
        created() {
            if (localStorage.token) {
                this.getUserDataByTokenFn()
            } else {
                this.$message.warning('请登录')
                this.$router.push('/')
            }
        },
        methods: {
            //设置全屏先说
            setFull() {
                // 是否全屏

            },
            backLogin(v) {//修改密码框关闭的回调函数
                if (v == 1) {//说明修改密码成功
                    this.pwdData = {
                        modal: false,
                        oldPwd: '',
                        newPwd: '',
                        againPwd: ''
                    }
                    //清除之前的缓存
                    localStorage.clear();
                    this.$router.push('/');
                } else {
                    this.pwdData = {
                        modal: false,
                        oldPwd: '',
                        newPwd: '',
                        againPwd: ''
                    }
                }

            },
            updPwd() {
                var that = this;
                //alert( this.$store.state.user.userId);
                if (this.pwdData.newPwd === '' || this.pwdData.againPwd === '') {
                    this.$message.warning('请将信息填写完整!')
                    return;
                } else if (
                    this.pwdData.newPwd != this.pwdData.againPwd
                ) {
                    this.$message.warning('两次输入的密码不一致!')
                    return;
                }
                setUserPassword({
                    userId: this.$store.state.user.userId,
                    newPassword: this.pwdData.newPwd,
                    confirmPassword: this.pwdData.againPwd
                }).then(res => {
                    if (res.code == 200) {
                        that.$message.success(res.data + ",请重新登陆!")
                        that.backLogin(1);
                    } else {
                        that.$message.error("操作失败!")
                    }
                });
            },
            // getMenu() {
            //     this.menuList = menuList
            //     this.$store.dispatch('permission/generateRoutes', menuList)
            // },
            // 提交密码
            pwdSave() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        setUserPWD({
                            password: this.pwdData.oldPwd,
                            newPassword: this.pwdData.newPwd,
                            confirmNewPassword: this.pwdData.againPwd,
                            flag: this.$store.state.userType == 'PLATFORM' ? 'Y' : 'N'
                        }).then(res => {
                            this.$message.success(res.data)
                            this.pwdData.modal = false
                        })
                    } else {
                        return false
                    }
                })
            },
            // 修改密码
            pwdBtn() {
                this.pwdData = {
                    modal: true,
                    oldPwd: '',
                    newPwd: '',
                    againPwd: ''
                }
            },

            getUserDataByTokenFn() {
                getUserDataByToken({
                    type: 5
                }).then(res => {
                    this.menuList = res.data
                    console.log(this.menuList)
                    this.$store.dispatch('permission/generateRoutes', res.data)
                })
            },
            outBtn() {
                localStorage.clear()
                this.$store.state.tagsView.cachedViews = []
                this.$store.state.tagsView.visitedViews = []
                this.$router.push('/')
            }
        }
    }
</script>

<style scoped>
    .header-bg {
        background-color: #071C44;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .el-main {
        background-color: #EEF0F5;
        padding: 0;
    }

    .el-container {
        height: 100%;
    }

    .aside {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        width: 200px;
        height: 100%;
        background-color: #071c44;
        z-index: 998;
    }

    .header-tags {
        position: fixed;
        top: 60px;
        left: 200px;
        right: 0;
        padding: 0;
        height: 33px !important;
        z-index: 999;
        background: #071C44;
    }

    .aside-menu {
        overflow: auto;
        padding-bottom: 60px;
    }

    .aside-menu::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .menu-bg > .el-menu-item, .el-submenu {
        padding: 0 !important;
        width: 200px;
        text-align: left;
    }

    .el-menu-item {
        color: inherit;
        background: #071C44;
    }

    .el-submenu__title i {
        color: inherit;

    }

    .el-submenu__title {
        color: inherit;
        background-color: rgb(47, 64, 80);
    }

    li.el-submenu {
        background-color: rgb(47, 64, 80);
    }

    .yla-top-logo {
        margin-top: 20px;
        float: left;
        width: 201px;
        height: 40px;
        background: url("../../assets/imgs/tps.png") 0px 0px no-repeat;
    }

    .el-scrollbar__wrap {
        background: #707a8e;
    }

    .tags-view-container {
        background: #060606;
    }

    .el-main {
        /*background-color: #060606;*/
    }
</style>
